<template>
  <div class='container'>
     <el-dialog
  title="预览文章"
  :visible.sync="dialogVisible"
  width="50%"
  >
    <h2>{{article.title}}</h2>
  <span>{{article.createTime |  formatDate}}</span>&nbsp;&nbsp;
  <span>{{article.username}}</span>&nbsp;&nbsp;&nbsp;
  <span class="el-icon-view"></span>&nbsp;&nbsp;&nbsp;
  <span>{{article.visits}}</span>
  <div class="box" v-html="article.articleBody"></div>
    </el-dialog>
  </div>
</template>

<script>
// 导入文章详情接口
import { detail } from '@/api/hmmm/articles.js'
// 导入moment处理时间
import moment from 'moment'
export default {
  data () {
    return {
      dialogVisible: false, // 控制弹框是否显示
      article: {
        title: '', // 标题
        createTime: null, // 时间
        username: '', // 用户名
        visits: null, // 访问量
        articleBody: ''// 内容
      }

    }
  },
  methods: {
    // 弹层显示
    dialogFromShow () {
      this.dialogVisible = true
    },
    // 弹层隐藏
    dialogFromHidden () {
      this.dialogVisible = false
    },
    // 获取文章详情
    getDetail (row) {
      detail(row).then(res => {
        console.log(res)
        this.article = res.data
      })
    }

  },
  // 过滤器处理时间
  filters: {
    formatDate: function (time) {
      return moment(time).format('YYYY-MM-DD  hh:mm:ss')
    }
  }
}
</script>

<style scoped lang='scss'>
.box{
  background-color: #F5F5F5;
  margin: 10px 0;
  padding: 20px 10px;
  border-top: 1px dashed #ccc;
  overflow: hidden;
  width: 100%;
}
</style>
